<template>
	<view class="homeBox">
		<view class="home-box" >
			<!-- 商品列表 -->
			<view class="shop-list">
				<view v-for="(item, index) in shopList" :key="index" class="shop-item">
					<!-- 商品图片 -->
					<image :src="item.image" mode="aspectFill" class="shop-image"></image>
					<!-- 商品信息 -->
					<view class="shop-info">
						<!-- 标题 -->
						<view class="shop-title">{{ item.title }}
						<view class="shop-title-name">歌手</view>
						</view>
						<!-- 时间 -->
						<view class="shop-time">近期1场演出/1223.7万粉丝</view>
					</view>
				</view>
			</view>
		</view>
		<addressBox ref="addressBox" @addrFun="addrFun" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import addressBox from '@/components/cityPicker/addressBox.vue'
	import uniPicker from '@/components/uni_picker/uni_picker.vue'
	export default {
		name: 'uni_home',
		components: {
			addressBox,
			uniPicker,
		},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				NewsList: [], //输入框轮播文案
				// 输入框轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				shopList: [{
						image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
						title: '五月天1',
						time: '2023-10-01 14:00',
						location: '北京',
						price: '99.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '郑润泽2',
						time: '2023-10-02 15:00',
						location: '上海',
						price: '89.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
						title: '五月天3',
						time: '2023-10-03 16:00',
						location: '广州',
						price: '79.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '郑润泽4',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '五月天',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '郑润泽',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					}
				],
				paramObj: {
					addr: ''
				},
			}
		},
		watch: {},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',

			]),

		},
		async onLoad(option) {
			this.init()
		},
		mounted() {
		},
		methods: {
			setPicker(){
			},
			async init() {
				let res = await this.$apiFun.getApi(this.$api.menuListApi)
				console.log('res', res)
			},
			openAddr() {
				this.$refs['addressBox'].open()
			},
			addrFun(val) {
				console.log('val---------', val)
			}
		},
		onReachBottom() {
			console.log(1111111111111)
		},
		onPullDownRefresh() {},
	}
</script>

<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		color: #6c6c6c;

		.homeBox {
			width: 100%;
			height: 100%;
		}

		.home-box {
			padding: 0 15rpx;
			box-sizing: border-box;

		}
		/* 商品列表 */
		.shop-list {
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;
			/* 竖向排列 */
		}

		/* 单个商品项 */
		.shop-item {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			box-sizing: border-box;
			background-color: #fff;
			height:190rpx;
		}

		/* 商品图片 */
		.shop-image {
			border-radius: 50%;
			width: 125rpx;
			height: 125rpx;
		}

		/* 商品信息 */
		.shop-info {
			flex: 1;
			padding: 20rpx;/* 商品标题 */
		.shop-title {
			display: block;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 35rpx;
			display: flex;
			align-items: center;
			.shop-title-name{
				width: 70rpx;
				height:35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #bbbbbb;
				font-size: 22rpx;
				color:white;
				border-radius: 6rpx 6rpx 17rpx 6rpx;
				margin-left: 5rpx;
			}
		}
		}

		

		.shop-time {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 5rpx;
		}


	}
</style>